<template>
    <div>
        <Modal v-model="abnormalModal"
        :title="exceptionName"
        width="1200"
        :mask-closable="false"
        @on-visible-change="onVisibleChange">
            <div class="margin-bottom-20" v-if="Number(exceptionType) !== 1008">
                <span class="margin-right-10">房间状态:</span>
                <Checkbox v-model="hasLease" @on-change="getData(1)">已出租</Checkbox>
            </div>
            <Table stripe border :columns="tableColumns" :data="datas"></Table>
            <!--分页-->
            <Page :total="total"
                :page-size="size"
                :current.sync="currentPage"
                show-elevator
                @on-change="getData"
                show-total style="text-align:center">
            </Page>
                <!--分页end-->
            <div slot='footer'>
                <Button type='primary' @click='abnormalModal = false'>关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/javascript">
import util from '@/libs/util'
// import { date } from '@/libs/date';
import { DeviceTypeEnum, lockOpenTypes } from '@/libs/const'
import { http, api } from '@/libs/http'
import { date } from '@/libs/date'

export default {
  name: 'abnormalModal',
  props: {
    abnormal: {
      type: Boolean
    },
    exceptionType: {
      type: String
    },
    exceptionName: {
      type: String
    }
  },
  data () {
    const base = [
      { title: '房间号', render: (h, p) => <span>{p.row.room.room_name}</span> },
      { title: '房源地址', render: (h, p) => <span>{p.row.room.home && p.row.room.home.address}</span> }
    ]
    const renterStaus = { title: '出租状态', render: (h, p) => <span>{p.row.room.leases.length > 0 ? '已出租' : '未出租' }</span> }
    const syncTime = { title: '最新同步时间', render: (h, p) => <span>{date(p.row.updated_at)}</span> }
    return {
      openTypes: {
        outer_open: '外开',
        inner_open: '内开',
        close_door: '关门'
      },
      1008: [
        { title: '最后一次开/关门时间', render: (h, p) => <span>{p.row.content.time ? date(p.row.content.time) : '-'}</span> },
        { title: '开门类型', render: (h, p) => <span>{p.row.content.source ? lockOpenTypes[p.row.content.source] : '-'}</span> },
        { title: '开门人', render: (h, p) => <span>{p.row.content.source_name || '-'}</span> },
        { title: '开门/关门方式', render: (h, p) => <span>{this.openTypes[p.row.content.extra] || '-'}</span> },
        ...base
      ],
      1001: [
        renterStaus,
        syncTime,
        { title: '电池电量', render: (h, p) => <span>{p.row.attr}%</span> },
        ...base
      ],
      1006: [
        renterStaus,
        syncTime,
        { title: '离线设备', key: 'description' },
        { title: '设备类型', render: (h, p) => <span>{DeviceTypeEnum.properties[p.row.device_type].name}</span> },
        ...base
      ],
      3002: [
        renterStaus,
        syncTime,
        { title: '剩余电量', render: (h, p) => <span>{util.getLeftElectric(p.row.room)}度</span> },
        ...base
      ],
      100: [
        renterStaus,
        { title: '保修截止时间', render: (h, p) => <span>{p.row.device_state.guarantee_end}</span> },
        { title: '设备名称', key: 'description' },
        { title: '设备类型', render: (h, p) => <span>{DeviceTypeEnum.properties[p.row.device_type].name}</span> },
        ...base
      ],
      hasLease: false,
      datas: [],
      size: 10,
      total: 0,
      currentPage: 1
    }
  },
  computed: {
    abnormalModal: {
      get: function () {
        return this.abnormal
      },
      set: function (val) {
        this.$emit('isVisible', val)
      }
    },
    tableColumns () {
      return this[this.exceptionType]
    }
  },
  methods: {
    onVisibleChange (v) {
      if (v) {
        this.datas = []
        this.getData(1)
      } else {
        this.hasLease = false
        this.leased = false
      }
    },

    getData (page) {
      if (page === 1) {
        this.currentPage = 1
      }
      let params = {
        limit: this.size,
        offset: this.size * (page - 1),
        exception_type: this.exceptionType
      }
      if (Number(this.exceptionType) !== 1008) {
        if (this.hasLease) params.leased = 1
      }

      const apiPath = api.device_exception

      http.request(this, apiPath, null, params, res => {
        if (res) {
          this.datas = res.rows
          this.total = res.count || 0
        }
        this.isLoadig = false
      })
    },

    goToRoomDetail (home, room) {
      const homeId = home.id
      const roomId = room.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`,
        query: {
          roomId
        }
      })
    },

    goToHomeDetail (home) {
      const homeId = home.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`
      })
    },

    goToDeviceDetail (device) {
      const homeId = device.home.id
      const roomId = device.room.id
      const roomName = device.room.room_name
      const deviceType = device.device_type
      const deviceId = device.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`,
        query: {
          roomId,
          deviceType,
          deviceId,
          roomName
        }
      })
    }
  }
}
</script>
<style lang='less'>
.textActive {
    color: #05bac5;
    cursor: pointer;
}
</style>